<!DOCTYPE html>
<html lang="en">
	<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
<title>Meeting Bingo</title>
<script src="https://talkgadget.google.com/talkgadget/channel.js"></script>
<script src="jquery.js"></script>
<script src="jsrender.js"></script>

<script id="gameTemplate" type="text/x-jquery-tmpl">
<tr>
    <td class="text" onclick="tgd.Buzzword.GUI.CurrentGameID='{{:ID}}';getWords('{{:ID}}');setPanel(tgd.Buzzword.GUI.Panels.Play);">{{:Name}}</td>
    <td class="icon"><input type="image" src="about.png" height="32" width="32" alt="Info" onclick="showGameInfo('{{:ID}}');" /></td>
</tr>
</script>

<script id="playTemplate" type="text/x-jquery-tmpl">
{{for Words}}
<tr>
    <td class="icon"><input type="image" src="new.png" height="32" width="32" alt="+" onclick="incrementWord('{{:#parent.parent.data.GameID!}}', '{{:ID}}');" /></td>
    <td class="text" onclick="incrementWord('{{:#parent.parent.data.GameID!}}', '{{:ID}}');">{{:Word}}</td>
    <td data-id="{{:ID}}">{{:Count}}</td>
</tr>
{{/for}}
</script>

<script id="gameDetailsTemplate" type="text/x-jquery-tmpl">
<div>{{:Name}} - {{:Score}}
    <table>
    {{for Words}}
        <tr>
            <td>{{:Word}}</td>
            <td>{{:Count}}</td>
        </tr>
    {{/for}}
    </table>
</div>
</script>

<script type="text/javascript">
			//<![CDATA[



var tgd = tgd || {};
tgd.Buzzword = tgd.Buzzword || {};
tgd.Buzzword.GUI = tgd.Buzzword.GUI || {};
tgd.Buzzword.GUI.Panels = tgd.Buzzword.GUI.Panels || {};
tgd.Buzzword.GUI.Other = tgd.Buzzword.GUI.Other || {};
tgd.Buzzword.GUI.Buttons = tgd.Buzzword.GUI.Buttons || {};
tgd.Buzzword.GUI.GameStates = tgd.Buzzword.GUI.GameStates || { Ongoing : 1, Available : 2, Played : 3, Ended : 4 };
tgd.Buzzword.GUI.CurrentGameID = null;

function CALLBACK_123(json) {
    return json;
}


tgd.Services = tgd.Services || {};
tgd.Services.Bingo = tgd.Services.Bingo || {};

tgd.Services.Bingo.GameDAO = function () {
//todo: rename these variables
this.usersTgdGames;
this.gamesUsersTgdWords;
this.wordHit;
//     this.usersTgdGames = {"Games":[{"ID":"agxtZWV0aW5nYmluZ29yDAsSBGdhbWUYseEEDA","Name":"OIT All Hands Feb 23","CreatedBy":"tgd","Status":"AVAILABLE","Joined":true,"Score":31},{"ID":"agxtZWV0aW5nYmluZ29yDAsSBGdhbWUYmekEDA","Name":"Branch Meeting","CreatedBy":"tgd","Status":"ENDED","Joined":true,"Score":0},{"ID":"agxtZWV0aW5nYmluZ29yDAsSBGdhbWUYgfEEDA","Name":"Tims Class","CreatedBy":"tgd","Status":"ENDED","Joined":true,"Score":0},{"ID":"agxtZWV0aW5nYmluZ29yDAsSBGdhbWUY6fgEDA","Name":"No Agenda","CreatedBy":"tgd","Status":"AVAILABLE","Joined":true,"Score":0},{"ID":"agxtZWV0aW5nYmluZ29yDAsSBGdhbWUY0YAFDA","Name":"In The Morning","CreatedBy":"tgd","Status":"AVAILABLE","Joined":true,"Score":0}],"Response":{"Status":1,"Text":"show games by user"}};
//     this.gamesUsersTgdWords = {"Score":"0","Words":[{"ID":"agxtZWV0aW5nYmluZ29yIwsSBGdhbWUY6fgEDAsSBnBsYXllchgBDAsSBHdvcmQY6QcM","Word":"Lorum","Count":"0"},{"ID":"agxtZWV0aW5nYmluZ29yIwsSBGdhbWUY6fgEDAsSBnBsYXllchgBDAsSBHdvcmQY0Q8M","Word":"Ipsum","Count":"0"},{"ID":"agxtZWV0aW5nYmluZ29yIwsSBGdhbWUY6fgEDAsSBnBsYXllchgBDAsSBHdvcmQYuRcM","Word":"Dolar","Count":"0"},{"ID":"agxtZWV0aW5nYmluZ29yIwsSBGdhbWUY6fgEDAsSBnBsYXllchgBDAsSBHdvcmQYoR8M","Word":"Set","Count":"0"},{"ID":"agxtZWV0aW5nYmluZ29yIwsSBGdhbWUY6fgEDAsSBnBsYXllchgBDAsSBHdvcmQYiScM","Word":"Inno","Count":"0"}],"Response":{"Status":1,"Text":"get word list for user and game"}};
//     this.wordHit = {"ID":"agxtZWV0aW5nYmluZ29yIwsSBGdhbWUY6fgEDAsSBnBsYXllchgBDAsSBHdvcmQY6QcM","Word":"Lorum","Count":"1","Response":{"Status":"1","Text":"increment hit count"}};

    var gameInfo = {"ID":"agxtZWV0aW5nYmluZ29yDAsSBGdhbWUY6fgEDA","Name":"No Agenda","Status":"AVAILABLE","CreatedBy":"tgd","Users":[{"ID":"agxtZWV0aW5nYmluZ29yGAsSBGdhbWUY6fgEDAsSBnBsYXllchgBDA","Name":"tgd","Score":0,"Words":[{"ID":"agxtZWV0aW5nYmluZ29yIwsSBGdhbWUY6fgEDAsSBnBsYXllchgBDAsSBHdvcmQY6QcM","Word":"Lorum","Count":0},{"ID":"agxtZWV0aW5nYmluZ29yIwsSBGdhbWUY6fgEDAsSBnBsYXllchgBDAsSBHdvcmQY0Q8M","Word":"Ipsum","Count":0},{"ID":"agxtZWV0aW5nYmluZ29yIwsSBGdhbWUY6fgEDAsSBnBsYXllchgBDAsSBHdvcmQYuRcM","Word":"Dolar","Count":0},{"ID":"agxtZWV0aW5nYmluZ29yIwsSBGdhbWUY6fgEDAsSBnBsYXllchgBDAsSBHdvcmQYoR8M","Word":"Set","Count":0},{"ID":"agxtZWV0aW5nYmluZ29yIwsSBGdhbWUY6fgEDAsSBnBsYXllchgBDAsSBHdvcmQYiScM","Word":"Inno","Count":0}]}],"Response":{"Status":1,"Text":"get game info"}};
    var token = {"Response":{"Status":"1","Text":"token received"},"Token":"AHRlWrofrVCIUYrHAVTDzx2lEqF-qbhju61QsketYNFSjrvCaK0-w7GBK13km1BpGHRYHY4GbN5KAYjCt7_UKNDnDmwgQdxyCA2VBz4MElUHTQOEiClAydF-A_esSddLHo_PyWwcfshCdNAyyGYiWAaNbSmLmQY2A6cBK4SnUJ3iViIqzcGbbVY"};

    if (tgd.Services.Bingo.GameDAO._initialized === undefined) {

        tgd.Services.Bingo.GameDAO.prototype.getGame = function(id) {
            return this.usersTgdGames.Games.filter(function(element, index, array) { return element.ID === id })[0];
        }

        tgd.Services.Bingo.GameDAO.prototype.getGames = function(user, callback, refresh) {
        	var self = this;

        	if (self.usersTgdGames === undefined || refresh) {
        		$.get("http://meetingbingo.appspot.com/users/" + user + "/games?ts=" + new Date().getTime(), function(data) {
        			self.usersTgdGames = eval(data);
                    callback(self.usersTgdGames);
    			}, "text");
        	} else {
                setTimeout(function() { callback(self.usersTgdGames) }, 0);
        	}

            return;
        }

        tgd.Services.Bingo.GameDAO.prototype.createGame = function(name, user, callback) {
            var self = this;

            this._request = new XMLHttpRequest();
            this._request.onreadystatechange = function() {
                if (self._request.readyState == 4) {
                    self._data = eval(self._request.responseText);
                    
                    //add the created game to the list of existing games
                    self.usersTgdGames.Games.push(self._data);
                    
                    callback(self._data);
                }
            }
            this._request.open("POST", "http://meetingbingo.appspot.com/games", true);
            this._request.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
            this._request.send("Name=" + name + "&CreatedBy=" + user);
        }

        /*
         * game - unique id for game
         * user - unique id for user
         * words - CSV of words
         */
        tgd.Services.Bingo.GameDAO.prototype.setWords = function(game, user, words, callback) {
            var self = this;

            this._request = new XMLHttpRequest();
            this._request.onreadystatechange = function() {
                if (self._request.readyState == 4) {
                    self._data = eval(self._request.responseText);

                    callback(self._data);
                }
            }
            this._request.open("POST", "http://meetingbingo.appspot.com/games/" + game + "/users/" + user + "/words", true);
            this._request.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
            this._request.send("Words=" + words);
        }

        /*
         * game - unique id for game
         * user - unique id for user
         */
        tgd.Services.Bingo.GameDAO.prototype.getWords = function(game, user, callback) {
            //TODO: save individual results, right now only first wordlist can be retreived.
            //TODO: add option to be able to force refresh

            var self = this;

            if (self.gamesUsersTgdWords === undefined) {
            	$.get("http://meetingbingo.appspot.com/games/" + game + "/users/" + user + "/words?ts=" + new Date().getTime(), function(data) {
            		self.gamesUsersTgdWords = eval(data);
            		callback(self.gamesUsersTgdWords);
            	}, "text");
            } else {
            	setTimeout(function() { callback(self.gamesUsersTgdWords) }, 0);
            }
            
            return;
        }

        /*
         * game - unique id for game
         * word - unique id for word
         */
        tgd.Services.Bingo.GameDAO.prototype.incrementWord = function(game, word, callback) {
            var self = this;

            $.post("http://meetingbingo.appspot.com/games/" + game + "/words/" + word + "/hit", function(data) {
                self.wordHit = eval(data);
                callback(self.wordHit);
            }, "text");

            return;
        }

        /*
         * game - unique id for game
         */
        tgd.Services.Bingo.GameDAO.prototype.getGameData = function(game, callback) {
            var self = this;

            this._request = new XMLHttpRequest();
            this._request.onreadystatechange = function() {
                if (self._request.readyState == 4) {
                    self._data = eval(self._request.responseText);

                    callback(self._data);
                }
            }
            this._request.open("GET", "http://meetingbingo.appspot.com/games/" + game + "?ts=" + new Date().getTime(), true);
            this._request.send(null);
        }

        /*
         * game - unique id for game
         * opts - optional parameters for update - { Name : String, Status : String (AVAILABLE | ENDED), Delete : Boolean }
         */
        tgd.Services.Bingo.GameDAO.prototype.updateGame = function(game, opts, callback) {
            var self = this;

            this._request = new XMLHttpRequest();
            this._request.onreadystatechange = function() {
                if (self._request.readyState == 4) {
                    self._data = eval(self._request.responseText);

                    callback(self._data);
                }
            }
            this._request.open("POST", "http://meetingbingo.appspot.com/games/" + game, true);
            this._request.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
            this._request.send("JSON=" + JSON.stringify(opts) + 
                (opts.Name ? "&Name=" + opts.Name : "") +
                (opts.Status ? "&Status=" + opts.Status : "") +
                (opts.Delete ? "&Delete=" + opts.Delete : ""));
        }

        /*
         * game - unique id for game
         * user - unique id for user
         */
        tgd.Services.Bingo.GameDAO.prototype.joinGame = function(game, user, callback) {
            var self = this;

            this._request = new XMLHttpRequest();
            this._request.onreadystatechange = function() {
                if (self._request.readyState == 4) {
                    self._data = eval(self._request.responseText);

                    callback(self._data);
                }
            }
            this._request.open("POST", "http://meetingbingo.appspot.com/games/" + game + "/users/" + user, true);
            this._request.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
            this._request.send(null);
        }

        /*
         * user - unique id for user
         */
        tgd.Services.Bingo.GameDAO.prototype.getToken = function(user, callback) {
            var self = this;

            this._request = new XMLHttpRequest();
            this._request.onreadystatechange = function() {
                if (self._request.readyState == 4) {
                    self._data = eval(self._request.responseText);

                    callback(self._data);
                }
            }
            this._request.open("GET", "http://meetingbingo.appspot.com/users/" + user + "/token", true);
            this._request.send(null);
        }

        tgd.Services.Bingo.GameDAO._initialized = true;
    }
}







function showGameInfo(gameId) {
	//Set the game title.
	$("#panGameInfo .head .text").text(tgd.Buzzword.Game.getGame(gameId).Name);

	//Set the link for users to share.
	$("#panGameInfo .content a").attr("href", window.location.protocol + "//" + window.location.hostname + window.location.pathname + "?game=" + gameId)

	setPanel(tgd.Buzzword.GUI.Panels.GameInfo);
}



function init() {

    if (!window.localStorage.UserName) {
        var username = "";
        while(!(username = prompt("Please enter your username.")) || username === "") {}
        window.localStorage.UserName = username;
    }

    tgd.Buzzword.Game = new tgd.Services.Bingo.GameDAO();

    $("#panFeed").ajaxError(function(event, jqXHR, ajaxSettings, thrownError) { console.log(thrownError);$(this).text("Triggered ajaxError handler;"); });

	tgd.Buzzword.GUI.Panels.Available = document.getElementById("panAvailable");
	tgd.Buzzword.GUI.Panels.Create = document.getElementById("panCreate");
	tgd.Buzzword.GUI.Panels.Join = document.getElementById("panJoin");
	tgd.Buzzword.GUI.Panels.Details = document.getElementById("panGameDetails");
	tgd.Buzzword.GUI.Panels.Play = document.getElementById("panPlay");
	tgd.Buzzword.GUI.Panels.OngoingGames = document.getElementById("panOngoingGames");
	tgd.Buzzword.GUI.Panels.AvailableGames = document.getElementById("panAvailableGames");
	tgd.Buzzword.GUI.Panels.PlayedGames = document.getElementById("panPlayedGames");
	tgd.Buzzword.GUI.Panels.EndedGames = document.getElementById("panEndedGames");
	tgd.Buzzword.GUI.Panels.OngoingGamesRepeater = document.getElementById("panOngoingGamesRepeater");
	tgd.Buzzword.GUI.Panels.AvailableGamesRepeater = document.getElementById("panAvailableGamesRepeater");
	tgd.Buzzword.GUI.Panels.PlayedGamesRepeater = document.getElementById("panPlayedGamesRepeater");
	tgd.Buzzword.GUI.Panels.EndedGamesRepeater = document.getElementById("panEndedGamesRepeater");
	tgd.Buzzword.GUI.Panels.Feed = document.getElementById("panFeed");
	tgd.Buzzword.GUI.Panels.GameInfo = document.getElementById("panGameInfo");

	tgd.Buzzword.GUI.Other.GameTitle = document.getElementById("lblGameTitle");
	tgd.Buzzword.GUI.Other.DetailGameTitle = document.getElementById("lblDetailGameTitle");
	tgd.Buzzword.GUI.Other.JoinGameTitle = document.getElementById("lblJoinGameTitle");
	tgd.Buzzword.GUI.Other.DetailsBackButton = document.getElementById("lnkDetailsBackButton");

	tgd.Buzzword.GUI.Buttons.Join = document.getElementById("btnJoin");

	setPanel(tgd.Buzzword.GUI.Panels.Available);

    //get game ID from URL
    if (window.location.search.search(/game=/) > -1) {
    	var gameID = window.location.search.substr(window.location.search.search(/game=/) + 5);
    	joinGame(gameID);
    } else {
    	console.log("Calling getGames");
        getGames();
    }

    getToken(window.localStorage.UserName);
}



function getGames(refresh) {
	console.log("Set loading = true");
    setLoading(true, $("#panAvailable .foot span"));
    console.log("Requesting games from DAO");
    tgd.Buzzword.Game.getGames(window.localStorage.UserName, function(d) {
    	console.log("callback called, rendering data now");
        $("#panOngoingGames").html($("#gameTemplate").render(d.Games.filter(function(element, index, array) { return element.Status === "AVAILABLE" })));
        $("#panPastGames").html($("#gameTemplate").render(d.Games.filter(function(element, index, array) { return element.Status === "ENDED" })));
        setLoading(false, $("#panAvailable .foot span"));
    }, refresh);
}

function getWords(game) {
    setLoading(true, $("#panPlay .foot span"));
    $("#tblWords").empty();
    $("#panPlay .head .text").text(tgd.Buzzword.Game.getGame(game).Name);
    tgd.Buzzword.Game.getWords(game, window.localStorage.UserName, function(d) {
    	d.GameID = game;  //TODO: the API should return the game id and name.
    	$("#btnGameDetails").on("click", function() { getGameData(d.GameID) } );
        $("#tblWords").html($("#playTemplate").render(d));
        setLoading(false, $("#panPlay .foot span"));
    });
}

function incrementWord(game, word) {
	setLoading(true, $("#panPlay .foot span"));
	tgd.Buzzword.Game.incrementWord(
		game,
		word,
		function(data) {
			$("#panPlay .content #tblWords [data-id=" + data.ID + "]").text(data.Count);
			setLoading(false, $("#panPlay .foot span"));
		}
	);
}

function addGame() {
	//Show the modal loading screen
	$("#panModalLoading").show();

	tgd.Buzzword.Game.createGame(
		$("#txtGame").val(),
		window.localStorage.UserName,
		function(data) {
			//Reload the available games
			tgd.Buzzword.Game.getGames(window.localStorage.UserName, function(d) {
			    $("#panOngoingGames").html($("#gameTemplate").render(d.Games.filter(function(element, index, array) { return element.Status === "AVAILABLE" })));
			}, false);

            //Blank the new game name textbox so a new game can be created
            $("#txtGame").text("");

            //Set the game title.
            //Set the link for users to share.
            //TODO: which screen do I show here? or do i show it after the modal loading screen is hidden?
            showGameInfo(data.ID);

            //Hide the modal loading screen
            $("#panModalLoading").hide();
        }
    );
}

function joinGame(game) {
    //Show the modal loading screen
    $("#panModalLoading").show();

	tgd.Buzzword.Game.joinGame(
		game,
		window.localStorage.UserName,
		function(data) {
			//var newRow = rowFactory(tgd.Buzzword.GUI.GameStates.Available, data);
			//tgd.Buzzword.GUI.Panels.AvailableGamesRepeater.appendChild(newRow);

            //Reload the available games
            tgd.Buzzword.Game.getGames(window.localStorage.UserName, function(d) {

            	//Add the newly joined game
            	d.Games.push(data);

            	//Reload the game list to display the newly joined game
                $("#panOngoingGames").html($("#gameTemplate").render(d.Games.filter(function(element, index, array) { return element.Status === "AVAILABLE" })));

                //Put the game ID on the button for retreval upon press
                $("#btnJoin").data("gameID", data.ID);

                //Set the game title
                $("#panJoin .head .text").text(data.Name);

                //Show the join screen
                setPanel(tgd.Buzzword.GUI.Panels.Join);

                //Hide the modal loading screen
                $("#panModalLoading").hide();
            }, false);
		}
	);
}

function setWords(game) {
	var words = [];
	
	//add a row to 'words' for each value in the textboxes
	$("#panJoin [type='text']").each(function(index, element) { words.push(element.value); });

	tgd.Buzzword.Game.setWords(
		game,
		window.localStorage.UserName,
		words.join(","),
		function(data) {
            //var row = getGameRow(data.ID);
			//var newRow = rowFactory(tgd.Buzzword.GUI.GameStates.Ongoing, data);

			//tgd.Buzzword.GUI.Panels.AvailableGamesRepeater.removeChild(row)

			//if (tgd.Buzzword.GUI.Panels.AvailableGamesRepeater.childNodes.length === 0) {
				//hideElement(tgd.Buzzword.GUI.Panels.AvailableGames);
			//}

			//tgd.Buzzword.GUI.Panels.OngoingGamesRepeater.appendChild(newRow);
			setPanel(tgd.Buzzword.GUI.Panels.Available);

			//setLoading(false);
		}
	);
}

function getGameData(game) {
	console.log("Getting getGameData -> " + game);

	$("#panModalLoading").show();
	setPanel(tgd.Buzzword.GUI.Panels.Details);

	tgd.Buzzword.Game.getGameData(
		game,
		function(data) {
			//TODO add delete capability
			//TOOD possibly add cache to DAO and refresh button

			$("#panGameDetails .head .text").text(data.Name);
			$("#panGameDetails .content").html($("#gameDetailsTemplate").render(data.Users));

			$("#panModalLoading").hide();
		}
	);
}

function renameGame(game, name) {
	setLoading(true);
	tgd.Buzzword.Game.updateGame(
		game,
		{ Name : name },
		function(data) {
			var row = getGameRow(data.ID);
			row.getElementsByClassName("gameName")[0].textContent = data.Name;
			setLoading(false);
		}
	);
}

function endGame(game) {
	setLoading(true);
	tgd.Buzzword.Game.updateGame(
		game,
		{ Status : "ENDED" },
		function(data) {
			var row = getGameRow(data.ID);
			//TODO: for now, assuming that to end a game you had to of joined it
			var newRow = rowFactory(tgd.Buzzword.GUI.GameStates.Played, tgd.Buzzword.GUI.CurrentGame);
			tgd.Buzzword.GUI.Panels.OngoingGamesRepeater.removeChild(row);

			if (tgd.Buzzword.GUI.Panels.OngoingGamesRepeater.childNodes.length === 0) {
				hideElement(tgd.Buzzword.GUI.Panels.OngoingGames);
			}

			tgd.Buzzword.GUI.Panels.PlayedGamesRepeater.appendChild(newRow);
			showElement(tgd.Buzzword.GUI.Panels.PlayedGames);

			setLoading(false);
		}
	);
}

function deleteGame(game) {
	setLoading(true);

	tgd.Buzzword.Game.updateGame(
		game,
		{ Delete : true },
		function(data) {
			var row = getGameRow(data.ID);

			if (row.parentNode.childNodes.length === 1) {
				hideElement(row.parentNode.parentNode);
			}

			row.parentNode.removeChild(row);

			setLoading(false);
		}
	);
}

function getToken(user) {
	tgd.Buzzword.Game.getToken(
		user,
		function(data) {
			var chan = new goog.appengine.Channel(data.Token);

			var socket = chan.open( {
				onopen : function() { console.log("socket opened"); },
				onmessage : function(msg) {
					$("#panFeed").text(msg.data).fadeIn("fast", function() { $(this).delay(1500).fadeOut("fast"); })
				},
				onerror : function(err) { console.log(err.description); },
				onclose : function() { console.log("socket closed") }
			});
		}
	);
}



function setLoading(show, ele) {
	var d = new Date();
	ele.text((show) ? "loading ..." : d.getHours() + ":" + (d.getMinutes() < 10 ? '0' : '') + d.getMinutes());
}

function setPanel(ele) {
    hideElement(tgd.Buzzword.GUI.Panels.Available);
    hideElement(tgd.Buzzword.GUI.Panels.Create);
    hideElement(tgd.Buzzword.GUI.Panels.Join);
    hideElement(tgd.Buzzword.GUI.Panels.Details);
    hideElement(tgd.Buzzword.GUI.Panels.Play);
    hideElement(tgd.Buzzword.GUI.Panels.GameInfo);

    showElement(ele);
}

function hideElement(ele) {
    if (ele.className.search("hidden") < 0) {
	    ele.className = ele.className.concat(" hidden");
	}
}

function showElement(ele) {
	if (ele.className.search("hidden") >= 0) {
	    ele.className = ele.className.replace("hidden", "");
	}
}

			//]]>
		</script>

<style type="text/css">

.hidden{display:none;}

body{font-family:sans-serif;color:#fff;background:#000;margin:0;padding:0;font-size:1.3em;overflow-x:hidden;}
a{color:#33B5E5;}
/* TEXTBOXES */
input[type="text"]{border:none;border-bottom:solid 1px #09c;background:#222;color:#fff;width:100%;padding:.2em;font-size:1em;}

/* HEADER */
.head{vertical-align:middle;border-collapse:collapse;width:100%;border-bottom:2px solid #09c;-moz-border-bottom-colors:#09c #33B5E5;}
.head .text{text-align:center;padding:.7em;}
.head .icon{width:32px;padding:.7em;}
.head .icon input{display:block;}

.content{padding:.5em;}

/* SUB HEADER */
#panAvailable div.subheader{font-size:.8em;color:#666;border-bottom:2px solid #222;-moz-border-bottom-colors:#303030 #222;text-transform:uppercase;}

/* ITEMS */
.items{vertical-align:middle;border-collapse:collapse;width:100%;}
.items :first-child .text,.items :first-child .icon{border-top:none;}
.items .text{border-top:2px solid #222;padding:.7em .3em;width:100%;}
.items .icon{border-top:2px solid #222;padding:.7em 0;width:32px;}
.items .icon input{display:block;}

/* FOOTER */
.foot{vertical-align:middle;border-collapse:collapse;width:100%;position:fixed;bottom:0;border-top:2px solid #09c;-moz-border-top-colors:#33B5E5 #09c;background:#000;}
.foot .text{text-align:center;padding:.7em;}
.foot .icon{width:32px;padding:.7em;}
.foot .icon input{display:block;}


/* LOADING SCREEN */
#panModalLoading{background:#000;color:#33B5E5;text-align:center;position:absolute;top:0;bottom:0;left:0;right:0;}

/* MESSAGE SPRITE */
#panFeed{background:#222;color:#33B5E5;margin-top:1em;text-align:center;}

</style>

	</head>
<body id="body" onload="init();">



<!--
    TODO: describe page
-->
<div id="panAvailable">
    <table class="head">
        <tr>
            <td class="icon">&nbsp;</td>
            <td class="text">Games</td>
            <td class="icon"><input type="image" src="new.png" height="32" width="32" alt="+" onclick="setPanel(tgd.Buzzword.GUI.Panels.Create);" /></td>
        </tr>
    </table>
    <div class="content">
        <div class="subheader">Ongoing Games</div>
        <table id="panOngoingGames" class="items"></table>
        <div class="subheader">Past Games</div>
        <table id="panPastGames" class="items"></table>
    </div>
    <table class="foot">
        <tr>
            <td class="icon">&nbsp;</td>
            <td class="text">Refreshed: <span>never</span></td>
            <td class="icon"><input type="image" src="refresh.png" height="32" width="32" alt="Refresh" onclick="getGames(true);" /></td>
        </tr>
    </table>
</div>



<!--
    Allow the user to create a game by supplying a name and presssing 'Create'
-->
<div id="panCreate" class="hidden">
    <table class="head">
        <tr>
            <td class="icon"><input type="image" src="back.png" height="32" width="32" alt="<" onclick="setPanel(tgd.Buzzword.GUI.Panels.Available);" /></td>
            <td class="text">New</td>
            <td class="icon">&nbsp;</td>
        </tr>
    </table>
    <div class="content">
        <div>
            <label for="txtGame">Name: </label>
            <input type="text" id="txtGame" maxlength="30" />
        </div>
        <input type="button" value="Create" onclick="addGame();" />
    </div>
</div>



<!--
    This page simply shows the link for a given game so that a user can share to another potential participant.
-->
<div id="panGameInfo" class="hidden">
    <table class="head">
        <tr>
            <td class="icon"><input type="image" src="back.png" height="32" width="32" alt="<" onclick="setPanel(tgd.Buzzword.GUI.Panels.Available);" /></td>
            <td class="text"></td>
            <td class="icon">&nbsp;</td>
        </tr>
    </table>
    <div class="content">
        Share this <a>link</a> to anyone to allow them to join the game.
    </div>
</div>



<!--
    This page ...
-->
<div id="panPlay" class="hidden">
    <table class="head">
        <tr>
            <td class="icon"><input type="image" src="back.png" height="32" width="32" alt="<" onclick="setPanel(tgd.Buzzword.GUI.Panels.Available);" /></td>
            <td class="text"></td>
            <td class="icon"><input id="btnGameDetails" type="image" src="about.png" height="32" width="32" alt="Info" /></td>
        </tr>
    </table>
    <div class="content">
        <table id="tblWords" class="items"></table>
        <div id="panFeed"></div>
    </div>
    <table class="foot">
        <tr>
            <td class="icon">&nbsp;</td>
            <td class="text">Refreshed: <span>never</span></td>
            <td class="icon"><input type="image" src="refresh.png" height="32" width="32" alt="Refresh" onclick="getWords();" /></td>
        </tr>
    </table>
</div>



<!--
    This page is shown when a blocking API call is made.
-->
<div id="panModalLoading" class="hidden">loading ...</div>



<!--
    This page allows the user to set their 5 words for the game.
-->
<div id="panJoin" class="hidden">
    <table class="head">
        <tr>
            <td class="icon"><input type="image" src="back.png" height="32" width="32" alt="<" onclick="setPanel(tgd.Buzzword.GUI.Panels.Available);" /></td>
            <td class="text"></td>
            <td class="icon">&nbsp;</td>
        </tr>
    </table>
    <div class="content">
        <table class="items">
            <tr><td class="text"><input type="text" maxlength="20" /></td></tr>
            <tr><td class="text"><input type="text" maxlength="20" /></td></tr>
            <tr><td class="text"><input type="text" maxlength="20" /></td></tr>
            <tr><td class="text"><input type="text" maxlength="20" /></td></tr>
            <tr><td class="text"><input type="text" maxlength="20" /></td></tr>
            <tr><td class="text"><input type="button" id="btnJoin" class="button" value="Join" onclick="setWords($(this).data('gameID'));" /></td></tr>
        </table>
    </div>
</div>



<!--
    This page shows all users, their words, and scores for the selected game.
-->
<div id="panGameDetails" class="hidden">
    <table class="head">
        <tr>
            <td class="icon"><input type="image" src="back.png" height="32" width="32" alt="<"
                onclick="setPanel(tgd.Buzzword.GUI.Panels.Play);" />
            </td>
            <td class="text"></td>
            <td class="icon">&nbsp;</td>
        </tr>
    </table>
    <div class="content"></div>
</div>



</body>
</html>
